@charset "UTF-8";
html, body{margin:0;padding:0;height:100%;overflow:hidden}
body{background:#ccc;font-family:'Trebuchet MS', sans-serif}
img{border:0}
h1{display:none}
h2{color:#0c9}
h3{color:#039}
h4{color:#999;text-indent:1em}
h2:before, h3:before, h4:before{content:'<'}
h2:after, h3:after, h4:after{content:' />'}

#container, #tabs, #filebrowser, #menubar, #statusbar{display:block}
#tabs{margin:0;padding:0;margin-top:22px}
#tabs li{color:#666;background:#ddd;border:1px solid #999;border-bottom:0;font-size:0.8em;padding:4px 8px;display:inline;cursor:pointer;border-radius:4px 4px 0 0}
#tabs .current{background:#fed;cursor:default}
.close{font-size:0.8em;border:1px solid #fc9;border-radius:2px;padding:0 4px;margin-left:4px}
.close:hover{color:#fff;background:#f66;border:1px solid #c66}

#container{position:absolute;overflow:hidden;width:100%;top:45px;bottom:20px}
#editor, #preview{width:50%;height:100%;margin:0;padding:0;overflow:hidden;
 -webkit-transition:all 0.3s linear;
 -moz-transition:all 0.3s linear;
 -o-transition:all 0.3s linear;
 transition:all 0.3s linear}
#preview{outline:1px solid #ccc;float:right}
#code{height:100%;width:100%}
#previewframe{background:#fff;border:0;width:100%;height:100%}

#filebrowser{font-size:0.9em;background:#fff;border:1px solid #ccc;padding:10px;width:300px;height:100%;position:absolute;top:20px;bottom:20px;right:-320px;
 -webkit-transition:all 0.3s linear;
 -moz-transition:all 0.3s linear;
 -o-transition:all 0.3s linear;
 transition:all 0.3s linear}
#filebrowser:hover{right:0}
#ftpTab{position:absolute;margin-left:-22px;top:50%;margin-top:-48px}
#ftpForm label{display:inline-block;width:6em}

#menubar, #statusbar{background:#ddd;height:20px;width:100%;position:absolute;cursor:pointer}
#menubar ul, #statusbar ul{margin:0;padding:0}
#menubar li, #statusbar li{display:block;float:left;padding:0 1em;font-size:0.9em}
#menubar a, #statusbar a{color:#000;text-decoration:none}
#menubar li ul{color:#ccc;background:#ddd;position:absolute;display:none;margin-left:-1em}
#menubar li ul li{width:100%;padding:0;clear:left;font-size:1em}
#menubar li ul a{display:block;padding:0 1em}
#menubar li ul a:hover{color:#fff;background:#009}
#menubar li ul li ul{margin-left:130px;margin-top:-20px}
#menubar li ul li ul:before{content:'\25b8'}
#menubar li ul li ul li{display:none}
#menubar li ul li:hover ul li{display:block}
#menubar{top:0}
#statusbar{bottom:0}
#menubar li ul li.sep{border-top:1px solid #999;margin-top:2px;padding-top:2px}

#debugger{position:absolute;height:300px;width:400px;bottom:-280px;right:0;overflow:auto;background:#fff;border:1px solid #333;font-family:monospace;opacity:0.7;
 -webkit-transition:all 0.3s linear;
 -moz-transition:all 0.3s linear;
 -o-transition:all 0.3s linear;
 transition:all 0.3s linear}
#debugger:hover{bottom:0}

#blackarea {background:#000;width:100%;height:100%;position:absolute;top:0;left:0;opacity:0.8}
#splash{position:absolute;top:50%;left:50%;width:400px;height:300px;margin-top:-150px;margin-left:-200px}
#infobox,#todo{color:#333;background:#fff;padding:1em;position:absolute;top:50%;left:50%;width:600px;height:400px;margin-top:-200px;margin-left:-300px;overflow:auto;display:none}
#filedata label{display:inline-block;width:6em}
#filedata input[type=text]{width:24em}
.important{background:#ff9;border:1px solid #990;margin:1em;padding:1em;font-size:0.8em}
#hl label{display:inline-block;width:7em}
#hl input[type=text]{width:3em}
.hlbox{border:1px solid #000;width:16px;height:16px;display:inline-block;border-radius:2px}
